<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>外教练习查询</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">查查查，查TMD埋点</div>

    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">坑B</a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this"><a href="javascript:;">V</a></dd>
                        <dd><a th:href="log">Log</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>异常练习查询</legend>
        </fieldset>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">groupId</label>
                    <div class="layui-input-inline">
                        <input type="text" name="searchId" id="searchId" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="day" width="20%">
                    </div>
                    <div class="layui-input-inline">
                        <button class="layui-btn" type="submit">搜索</button>
                    </div>
                </div>
            </div>
        </form>
        <div class="layui-tab layui-tab-card" lay-filter="demo" >
            <ul class="layui-tab-title">
                <li lay-id="liFlow" class="layui-this">流水</li>
                <li lay-id="liStudent">学生埋点</li>
                <li lay-id="liTeacher">老师埋点</li>
                <li lay-id="liVideo">上课视频</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                        <legend id="course_status"></legend>
                    </fieldset>
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header" id="course_id"></div>
                            <div class="layui-card-body" id="course_flow"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <table id="studentTable" lay-filter="test" lay-size="sm"></table>
                </div>
                <div class="layui-tab-item">
                    <table id="teacherTable" lay-filter="test" lay-size="sm"></table>
                </div>

                <div class="layui-tab-item">
                    <video height="600" id="video" controls></video>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="layui-footer">-->
    <!--&lt;!&ndash; 底部固定区域 &ndash;&gt;-->
    <!--© layui.com - 底部固定区域-->
    <!--</div>-->
</div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/md5.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
    Date.prototype.format = function (format) {
        var o = {
            "M+": this.getMonth() + 1, //month
            "d+": this.getDate(),    //day
            "h+": this.getHours(),   //hour
            "m+": this.getMinutes(), //minute
            "s+": this.getSeconds(), //second
            "q+": Math.floor((this.getMonth() + 3) / 3),  //quarter
            "S": this.getMilliseconds() //millisecond
        };
        if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
            (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o) if (new RegExp("(" + k + ")").test(format))
            format = format.replace(RegExp.$1,
                RegExp.$1.length == 1 ? o[k] :
                    ("00" + o[k]).substr(("" + o[k]).length));
        return format;
    };

    layui.use(['util', 'jquery', 'form', 'element', 'table', 'laydate'], function () {
        var util = layui.util, table = layui.table, form = layui.form, element = layui.element, laydate = layui.laydate, $ = layui.$;
        //第一个实例
        util.fixbar({
            showHeight: 10
        });
        //日期范围

        laydate.render({
            elem: '#day',
            isInitValue: true,
            value: new Date().format("yyyy-MM-dd")
        });
        //监听提交
        form.on('submit()', function (data) {
            element.tabChange('demo','liFlow');
            $.ajax({//异步请求返回给后台
                url: '/demo/table/course',
                type: 'GET',
                data: {
                    searchId: $("#searchId").val(),
                    dayDate: $("#day").val(),
                },
                dataType: 'json',
                success: function (data) {
                    $("#course_status").html(data.businessType);
                    $("#course_id").html(data.userId + " / " +data.teacherId +" \t"+  hex_md5(data.userId) + " / " + hex_md5(data.teacherId));
                    $("#course_flow").html(data.desc);
                    console.log(data)
                    $.ajax({
                        url: 'https://base.boxfish.cn/boxfish-online-service/online/video_mix_stream?student_id='+data.userId+'&teacher_id='+data.teacherId+'&room_id='+data.roomId,
                        type: 'GET',
                        dataType: 'json',
                        success: function (v) {
                            var video = document.getElementById('video');
                            if(Hls.isSupported()) {
                                var hls = new Hls();
                                hls.loadSource(v.mixVideoFileUrl);
                                hls.attachMedia(video);
                                // hls.on(Hls.Events.MANIFEST_PARSED,function() {
                                //     video.play();
                                // });
                            }
                        },
                        error: function () {
                            var video = document.getElementById('video');
                            if(Hls.isSupported()) {
                                var hls = new Hls();
                                hls.loadSource("");
                                hls.attachMedia(video);
                            }
                        }
                    });

                    table.reload('studentTable', {
                        url: '/demo/table/user',
                        where: {
                            userId: data.userId,
                            startTime: data.endTime - 1000 * 15,
                            endTime: data.endTime + 1000 * 60
                        },
                        page: {
                            curr: 1
                        }
                    });
                    table.reload('teacherTable', {
                        url: '/demo/table/user',
                        where: {
                            userId: data.teacherId,
                            startTime: data.endTime - 1000 * 15,
                            endTime: data.endTime + 1000 * 60
                        },
                        page: {
                            curr: 1
                        }
                    });
                }
            });

            return false;
        });
        table.render({
            elem: '#studentTable',
            limit: 500,
            limits: [500],
            size: 'sm',
            page: true,
            data: [],
            cols: [
                [
                    {
                        field: 'msgReceiveTime', width: 110, title: '接收时间', fixed: 'left',
                        templet: function (d) {
                            return new Date(d.msgReceiveTime).format('hh:mm:ss.S');
                        }
                    },
                    {
                        field: 'time', width: 110, sort: true, title: '创建时间',
                        templet: function (d) {
                            if(d.timeError){
                                return "<span style=\"color:red;\">"+new Date(d.time).format('hh:mm:ss.S')+"</span>";
                            }
                            return new Date(d.time).format('hh:mm:ss.S');
                        }
                    },
                    {
                        title: '信息',
                        templet: function (d) {
                            return d.properties.debug_message;
                        }
                    },
                    {
                        title: '系统信息', width: 90,
                        templet: function (d) {
                            return d.properties.sys_lib;
                        }
                    },
                    {
                        title: 'App信息', width: 120,
                        templet: function (d) {
                            if(d.properties.sys_app_release != "11.0.4"){
                                return "<span style=\"color:red;\">"+d.properties.sys_app_release + ' / ' + d.properties.sys_app_version+"</span>"
                            }else{
                                return d.properties.sys_app_release + ' / ' + d.properties.sys_app_version
                            }

                        }
                    }
                ]
            ],
            response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'totalElements' //数据总数的字段名称，默认：count
                , dataName: 'content' //数据列表的字段名称，默认：data
            }
        });
        table.render({
            elem: '#teacherTable',
            limit: 500,
            limits: [500],
            size: 'sm',
            page: true,
            data: [],
            cols: [
                [
                    {
                        field: 'msgReceiveTime', width: 110, title: '接收时间', fixed: 'left',
                        templet: function (d) {
                            return new Date(d.msgReceiveTime).format('hh:mm:ss.S');
                        }
                    },
                    {
                        field: 'time', width: 110, sort: true, title: '创建时间',
                        templet: function (d) {
                            if(d.timeError){
                                return "<span style=\"color:red;\">"+new Date(d.time).format('hh:mm:ss.S')+"</span>";
                            }
                            return new Date(d.time).format('hh:mm:ss.S');
                        }
                    },
                    {
                        title: '信息',
                        templet: function (d) {
                            return d.properties.debug_message;
                        }
                    },
                    {
                        title: '系统信息', width: 90,
                        templet: function (d) {
                            return d.properties.sys_lib;
                        }
                    },
                    {
                        title: 'App信息', width: 120,
                        templet: function (d) {
                            if(d.properties.sys_app_release != "3.1.0"){
                                return "<span style=\"color:red;\">"+d.properties.sys_app_release + ' / ' + d.properties.sys_app_version+"</span>"
                            }else{
                                return d.properties.sys_app_release + ' / ' + d.properties.sys_app_version
                            }

                        }
                    }
                ]
            ],
            response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'totalElements' //数据总数的字段名称，默认：count
                , dataName: 'content' //数据列表的字段名称，默认：data
            }
        });
    });

</script>
</body>
</html>